import React, { Component } from 'react'
// 生命周期就是在某个特定的时间段内自动执行的函数，特点是不需要手动调用
class Myclass extends Component {
  constructor(props) {  // 没一个类都有自己的构造器，如果自己不写，组件也会隐式的自己声明一个
    super(props) // 固定写法
    console.log("constructor");
    // 如果写了constructor，定义状态需要再constructor里定义，在这个里面定义状态要加this关键字
    this.state = {
        name:0
    }
  }
  fn (data) {
    this.setState({
        name:this.state.name + 1
    })
  }
  componentDidMount () { // 组件已经挂载完成，useEffect参数为空数组的时候模拟的就是他，相当于vue的mouted
     // 类组件发网络请求就再这个里面发，在这个生命周期里可以获取到dom
     console.log("componentDidMount");
  }
  componentDidUpdate () { // 组件更新完毕
    console.log("componentDidUpdate")
  }
  componentWillUnmount() { // 组件将要卸载的时候
    console.log("组件将要卸载")
  }
//   state = {}
  render() { // 只要state发生改变render函数就执行
     console.log("render");
    return (
      <div>myclass
          <h1>{this.state.name}</h1>
          <button onClick={this.fn.bind(this,"lisi")}>点击</button>
      </div>
    )
  }
}


export default Myclass